@value global: '../global/global.css';
@value unit, text-color, gray-color, dark-gray-color, blue-color, light-blue-color, link-hover-color, fixed-z-index, ellipsis from global;
@value dirty-blue-color: #D4EDFA;
@value table-border-color: #E6E6E6;
@value table-background-color: #F0F0F0;
@value table-header-background-color: #EBEBEB;
@value table-caption-border-color: #DBDBDB;
@value box-shadow-color: #F7F7F7;

.tableWrapper {
  position: relative;
}

.table {
  width: 100%;

  border-spacing: 0;
}

.userSelectNone {
  user-select: none;
}

.headerCell {
  & {
    padding: 0 calc(unit * 2.5);

    text-align: left;
    white-space: nowrap;

    color: dark-gray-color;

    font-weight: 200;
  }

  &:first-child {
    padding-left: calc(unit * 4);
  }

  &:last-child {
    width: 100%;
    padding-right: calc(unit * 4);
  }

  &:nth-child(1) {
    min-width: 297px;
  }

  &:nth-child(1):only-child {
    width: initial;
    max-width: none;
  }

  &.headerCellSorted {
    font-weight: 500;
  }

  &.headerCellSortable {
    cursor: pointer;
  }

  & .sorter {
    position: absolute;

    display: none;

    margin-left: 6px;

    user-select: none;
  }

  &.headerCellSortable .sorter {
    display: inline-block;
  }

  & .sorter .icon {
    top: -2px;
  }
}

.header {
  & {
    color: dark-gray-color;
    background-color: table-header-background-color;
  }

  & .headerCell {
    box-sizing: border-box;
    height: calc(unit * 5 + 1);

    border-top: 1px solid table-border-color;
    box-shadow: inset 0 1px 0 0 box-shadow-color;
  }

  & .caption {
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  & .headerCell .sorter {
    margin-top: -1px;
  }
}

.subHeader {
  & {
    color: gray-color;
    background-color: table-border-color;

    font-size: 12px;
  }

  & .headerCell {
    box-sizing: border-box;
    height: 25px;

    border-top: 1px solid table-caption-border-color;
  }

  & .headerCell:first-child {
    padding-left: calc(unit * 4);
  }
}

.subHeaderFixed {
  position: fixed;
  z-index: fixed-z-index;
  top: 0;

  & .headerCell {
    border-bottom: 1px solid table-caption-border-color;
  }
}

.row {
  & {
    outline: none;
    background-color: table-background-color;

    line-height: 39px;
  }

  @nest .table:not(.disabledHover) &:hover {
    background-color: #fff !important;
  }

  @nest .table:not(.multiSelection) &.rowFocused,
  &.rowSelected {
    background-color: light-blue-color;
  }

  & .cell {
    border: 1px none table-border-color;
    border-top-style: solid;
  }

  &:first-child .cell {
    border-top-color: table-caption-border-color;
  }

  &:last-child .cell {
    border-bottom-style: solid;
  }

  &.rowFocused .cell {
    border-color: blue-color;
    border-bottom-style: solid;
  }

  &.rowFocused + .row .cell {
    border-top-style: none;
  }

  &.rowSelected:not(.rowFocused) + .rowSelected:not(.rowFocused) .cell {
    border-top-color: dirty-blue-color;
  }
}

.loadingOverlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgba(255, 255, 255, 0.5);
}

.cell {
  & {
    composes: ellipsis;

    box-sizing: content-box;
    height: calc(unit * 5);
    padding: 0 calc(unit * 2.5);

    color: text-color;
  }

  &:first-child {
    padding-left: calc(unit * 4);
  }

  &:last-child {
    width: 100%;

    /* Markup hack, allows cell to have content which is wider than cell and collapses it */

    max-width: 0;
    padding-right: calc(unit * 4);
  }

  &:nth-child(1) {
    min-width: 297px;
    max-width: 617px;
  }

  &:nth-child(1):only-child {
    width: initial;
    max-width: none;
  }
}

.cellUnlimited {
  width: 100%;
}

.cellRight {
  text-align: right;
}

.metaColumn {
  position: relative;

  float: left;

  height: 37px;
  padding-top: 1px;
  padding-right: unit;

  @nest .header &,
  .subHeader & {
    height: 16px;
  }
}

.dragHandle {
  position: absolute;
  top: -11px;
  left: -24px;

  display: none;

  padding: unit;

  cursor: grab;

  color: gray-color;

  &:hover {
    color: link-hover-color;
  }
}

.visibleDragHandle {
  display: block;
}

.row:hover .dragHandle {
  display: block;
}

.draggingRow {
  vertical-align: middle;

  background-color: #fff;

  & .dragHandle {
    display: block;

    cursor: grabbing;

    color: link-hover-color;
  }
}

.cleanUI {
  & .tableHead {
    background-color: inherit;
  }

  & .header {
    background-color: inherit;

    & .headerCell {
      color: text-color;
      border-top: none;
      box-shadow: none;
    }
  }

  & .subHeader {
    background-color: inherit;

    & .headerCell {
      border-top: none;
      border-bottom: 1px solid table-border-color;
    }
  }

  & .metaColumn {
    height: 32px;
  }

  & .row {
    background-color: inherit;

    line-height: 31px;

    & .cell {
      height: 32px;

      border-top: none;
      border-bottom: none;
    }
  }
}
